<template>
  <div class="flex items-center justify-between mt-10px h-26px w-100vw px-10px py-0">
    <div class="time-bg w-100px h-26px flex items-center justify-center">
      <div class="text-9px">
        <van-count-down :time="time">
          <template #default="timeData">
            <div class="flex items-center justify-center relative w-100px h-26px text-9px">
              <span class="block absolute left-0px w-26px flex items-center justify-center">{{ timeData.hours }}</span>
              <span>{{ timeData.minutes }}</span>
              <span class="block absolute right-0px w-26px flex items-center justify-center">{{ timeData.seconds }}</span>
            </div>
          </template>
        </van-count-down>
      </div>
    </div>
    <div class='w="[calc(100vw-100px)]"'>
      <div class="flex items-center justify-between text-12px">
        <p class="m-0">No.{{ issue }}</p>
        <span class="flex items-center justify-center click-row" @click="emit('clickAllBtn')">All <img class="w-16px h-16px"
            src="@/assets/pk-10/right.png"></span>
      </div>
      <span class="flex items-center justify-center ">
        <p v-for="item in round" :key="item" class="round-item">{{ item }}</p>
      </span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const emit = defineEmits(['clickAllBtn'])
const issue = ref<string>('20240207184');
const time = ref<number>(30 * 60 * 60 * 1000);
const round = ref<string[]>(['03', '04', '05', '06', '09', '07', '08', '01', '02']);
</script>

<style lang="less" scoped>
.lottery-info {
  background: url('~/sic-bo/time-bg.png') no-repeat top left / 100% 100%;
}

.time-bg {
  background: url('~/pk-10/time-bg.png') no-repeat top left / 100% 100%;

  .time-text {
    color: #ffcdaa;
  }
}

.round-item {
  margin: 2px 4px 2px 0;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  color: #d7dfea;
  padding: 2px;
  font-size: 10px;
  background-color: #555e6e;
  border: 2px solid #616c7d;
  border-radius: 34px
}

.click-row {
  color: #e4c575;
}
</style>
